<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        #app {
            width: 810px;
            height: 400px;
            margin: 0px auto;
        }
        .demo-ruleForm{
            margin: 0px 240px;
        }

    </style>
</head>
<body>

<div id="app">
    <el-divider ><i class="el-icon-mobile-phone"></i>修改密码</el-divider>
    <el-form :model="pswInfo" status-icon :rules="rules" ref="pswInfo" label-width="100px"
             class="demo-ruleForm">
        <el-form-item label="旧密码：" prop="oldPassword">
            <el-input maxlength="11" v-model="pswInfo.oldPassword" type="text" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
            <el-input maxlength="11" v-model="pswInfo.newPassword" type="password" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" prop="checkPassword">
            <el-input maxlength="11" v-model="pswInfo.checkPassword" type="password" style="width: 300px;" v-on:blur="password()"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
            <el-button type="primary" @click="updatePassword()">提交</el-button>
            <el-button @click="clear()">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            pswInfo:{},
            uid:0,
        },
        methods: {
            updatePassword:function() {
                app.$refs["pswInfo"].validate((valid) => {
                    if (valid) {
                        if (app.pswInfo.newPassword != app.pswInfo.checkPassword) {
                            app.$notify.error({
                                title: '错误',
                                message: '两次输入的密码不一致'
                            });
                        } else {
                            $.get("/cai/consumer/getUid",function (backData) {
                                app.uid = backData.data;
                                $.get("/cai/password/list/"+app.uid,function (listBackData) {

                                });
                            });
                            $.post("/cai/password/updatePassword", app.pswInfo, function (backData) {
                                if (backData.code == 2) {
                                    app.$notify.error({
                                        title: '错误',
                                        message: '旧密码输入错误'
                                    });
                                } else {
                                    app.$notify.success({
                                        title: '成功',
                                        message: backData.msg
                                    });
                                    window.parent.parent.location.href = "/cai/consumer/back";
                                }
                            });
                        }
                    }
                });
            },
            password:function () {
                if (app.pswInfo.newPassword != app.pswInfo.checkPassword){
                    app.$notify.error({
                        title: '错误',
                        message: '两次输入的密码不一致'
                    });
                }
            },
            clear:function () {
                app.$refs["pswInfo"].resetFields();
            }
        }
    });

</script>
</body>
</html>
